<template>
  <div class="leftPops" ref="drags" @mousedown="moudedown">
    <!-- 标题 -->
    <div class="top">
      <div class="top_1">添加人员
        <!-- 图标 -->
        <div class="left_icon" @click="closePop()">
          <n-icon size="18px" color="#fff">
            <CloseSharp></CloseSharp>
          </n-icon>
        </div>
      </div>
    </div>
    <!-- 虚线 -->
    <div class="center"></div>
    <!-- 下面两栏 -->
    <div class="department">
      <!-- 左边 -->
      <div class="department_1" @mousedown.stop="">
        <!-- 下拉框 -->
        <n-collapse>
          <!-- 单独一项 -->
          <n-collapse-item title="安保部" name="1">
            <!-- 复选框 -->
            <n-space item-style="display: flex;flex-direction: column;" vertical>
              <n-checkbox v-bind:value="item.itemkey" v-bind:label="item.itemValue" v-for="(item, index) in peopleList"
                :key="index" @update:checked="handleChecked(item)" v-model:checked="item.itemBool" />
            </n-space>
          </n-collapse-item>
          <!-- 单独一项 -->
          <n-collapse-item title="管理部" name="2">
            <!-- <div>很好</div> -->
            <n-space item-style="display: flex;flex-direction: column;" vertical>
              <!-- <n-checkbox v-bind:value="item.itemkey" v-bind:label="item.itemValue" v-for="(item, index) in peopleList2"
                :key="index" v-model:checked="item.itemBool" @update:checked="handleChecked2(item)"/>
            </n-space> -->
              <n-checkbox v-bind:value="item.itemkey" v-bind:label="item.itemValue" v-for="(item, index) in peopleList2"
                :key="index" @update:checked="handleChecked2(item)" v-model:checked="item.itemBool" />
            </n-space>
          </n-collapse-item>
          <!-- 单独一项 -->
          <n-collapse-item title="行政部" name="3">
            <!-- <div>真棒</div> -->
            <n-space item-style="display: flex;flex-direction: column;" vertical>
              <n-checkbox v-bind:value="item.itemkey" v-bind:label="item.itemValue" v-for="(item, index) in peopleList3"
                :key="index" @update:checked="handleChecked3(item)" v-model:checked="item.itemBool" />
            </n-space>
          </n-collapse-item>
        </n-collapse>
      </div>
      <!-- 右边 -->
      <div class="department_2">
        <!-- 已选 -->
        <div class="department_3">
          已选:{{ selected.length }}
        </div>
        <!-- 遍历人员 -->
        <div class="department_4">
          <!-- 单独每一项 -->
          <div class="department_5" v-for="item in selected" :key="item.id">{{ item.itemValue }} 13545991845</div>
        </div>
      </div>
    </div>
    <!-- 按钮 -->
    <div class="bottomStyle">
      <button class="bottomStyle_1" @click="closePop()">取消</button>
      <button class="bottomStyle_2" @click="clickSure()">确认</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import { CloseSharp } from "@vicons/ionicons5";
import { useMainStore } from "../../store/index"
let mainStore: any = useMainStore()  // 获取pina
const peopleList = ref([{ 'id': 0, itemkey: 'zhangsan', itemValue: '张三', 'itemBool': false }, { 'id': 1, itemkey: 'lisi', itemValue: '李四', 'itemBool': false }, { 'id': 2, itemkey: 'wangwu', itemValue: '王五', 'itemBool': false }])
const peopleList2 = ref([{ 'id': 4, itemkey: 'maliu', itemValue: '麻六', itemBool: false }, { 'id': 5, itemkey: 'zhaoyi', itemValue: '赵一', itemBool: false }, { 'id': 6, itemkey: 'qianer', itemValue: '钱二', itemBool: false }])
const peopleList3 = ref([{ 'id': 7, itemkey: 'zhengqi', itemValue: '郑七', 'itemBool': false }, { 'id': 8, itemkey: 'zhouba', itemValue: '周八', 'itemBool': false }, { 'id': 9, itemkey: 'shunjiu', itemValue: '孙九', 'itemBool': false }])
const emit = defineEmits(['closeThreeP', 'openTwoP'])
const drags = ref()
const itemBool = ref(true)

const selected = ref([])

/**
 * 复选框勾选事件
 * @param param0 复选框id
 */
const handleChecked = ({ id: itemID }: any) => {
  peopleList.value.find((item) => {
    // 触发勾选事件
    if (item.id == itemID) {
      // 取反
      item.itemBool = !item.itemBool
      // 如果旋转的是勾选
      if (item.itemBool == true) {
        selected.value.push(item)
      } else if (item.itemBool == false) {
        // 删除某个元素
        selected.value.find((item, index) => {
          if (item.id == itemID) {
            selected.value.splice(index, 1)
          }
        })
      }
      return
    }
  })
}

const handleChecked2 = ({ id: itemID }: any) => {
  peopleList2.value.find((item) => {
    // 触发勾选事件
    if (item.id == itemID) {
      // 取反
      item.itemBool = !item.itemBool
      // 如果旋转的是勾选
      if (item.itemBool == true) {
        selected.value.push(item)
      } else if (item.itemBool == false) {
        // 删除某个元素
        selected.value.find((item, index) => {
          if (item.id == itemID) {
            selected.value.splice(index, 1)
          }
        })
      }
      return
    }
  })
}

const handleChecked3 = ({ id: itemID }: any) => {
  peopleList3.value.find((item) => {
    // 触发勾选事件
    if (item.id == itemID) {
      // 取反
      item.itemBool = !item.itemBool
      // 如果旋转的是勾选
      if (item.itemBool == true) {
        selected.value.push(item)
      } else if (item.itemBool == false) {
        // 删除某个元素
        selected.value.find((item, index) => {
          if (item.id == itemID) {
            selected.value.splice(index, 1)
          }
        })
      }
      return
    }
  })
}

/**
 * 鼠标拖动事件
 */
 const moudedown = (ev:any) => {
  console.log('ev', ev)
  let e = ev || event;
  let x = e.clientX - drags.value.offsetLeft; //鼠标点击坐标距离盒子左边缘的距离
  let y = e.clientY - drags.value.offsetTop; //鼠标点击坐标距离盒子上边缘的距离

  document.onmousemove = function (ev) {
    let e = ev || event;
    drags.value.style.left = ev.clientX - x + 'px';
    drags.value.style.top = ev.clientY - y + 'px';

    let bodyScreenX = ev.screenX
    let bodyClientWidth = document.body.clientWidth

    document.onmouseup = function (ev) {
      if (ev.clientX - x < 0) {
        drags.value.style.left = 0
      } else if (bodyScreenX > bodyClientWidth) {
        drags.value.style.right = 0
        drags.value.style.left = bodyClientWidth - 100 + 'px'
      }
      document.onmousemove = null;
      document.onmouseup = null;
    }
  }
}

/**
 * 点击确认
 */
const clickSure = () => {
  mainStore.selected = selected.value
  emit('closeThreeP')
  emit('openTwoP')
  // console.log('mainStore', mainStore.selected)
}

/**
 * 关闭弹窗
 */
const closePop = () => {
  emit('closeThreeP')
  emit('openTwoP')
}

</script>

<style lang="scss" scoped>
.leftPops {
  position: absolute;
  width: 350px;
  height: 350px;
  // border: 1px solid red;
  // margin-left: 450px;
  transform: translateX(450px);
  z-index: 18;
  // background-color: rgba(36, 85, 132, 0.6);
  background-image: url("../../assets/border/Group4896.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 15px 10px;
  overflow: hidden;
  overflow-y: auto;

  // justify-content: ;

  .top {
    // border: 1px solid red;

    .top_1 {
      // font-size: ;
      color: #fff;
      // border: 1px solid rgb(45, 12, 12);
      font-weight: bold;
      position: relative;

      .left_icon {
        // border: 1px solid red;
        position: absolute;
        right: 0;
        top: 2px;
        height: 20px;
        margin: 0;
        padding: 0;
        cursor: pointer;
      }
    }
  }

  .center {
    // border: 1px solid rgb(220, 221, 222);
    margin-top: 10px;
  }

  .department {
    // border: 1px solid red;
    margin-top: 10px;
    width: 100%;
    display: flex;

    // height: 100%;
    .department_1 {
      width: 49%;
      max-height: 250px;
      overflow: hidden;
      overflow-y: auto;
      // border: 1px solid blue;
    }

    .department_2 {
      width: 49%;
      // border: 1px solid rgb(138, 209, 6);

      .department_3 {
        // border: 1px solid red;
      }

      .department_4 {
        margin-top: 10px;
        // border: 1px solid blue;
      }
    }
  }

  .bottomStyle {
    // margin-top: 10px;
    display: flex;
    position: absolute;
    bottom: 10px;
    // align-items: flex-end;
    justify-content: center;
    left: 24%;
    // text-align: center;

    .bottomStyle_1 {
      outline: none;
      border: none;
      border-radius: 5px;
      padding: 3px 30px;
      color: #fff;
      // background-color: #fff;
      background-image: url("../../assets/border/Group3037.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin-right: 5px;
      cursor: pointer;
    }

    .bottomStyle_2 {
      outline: none;
      border: none;
      border-radius: 5px;
      padding: 3px 30px;
      color: #fff;
      // background-image: url("../../assets/border/Group3037.png");
      background-image: url("../../assets/border/Group3038.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin-left: 5px;
      cursor: pointer;
    }
  }

}
</style>